import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    ListView,
    ScrollView,
    Text,
    TouchableOpacity,
    Dimensions,
    Switch,
    Slider,
    Image,
} from 'react-native'
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan';
import { MtContainer, MtListView, MtSeparator, MtChar,MtNavBar, MtScreen, MtEmptyView, MtColor,MtButton, MtLoadingModal, MtLabelBar } from 'martian-ui';
import NavigationBar from '../../components/common/NavigationBar'

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
const { MtT1, MtLabel, MtL3, MtL4 } = MtChar;
class Sensor extends Component {
  constructor(props) {
    super(props)
    this.state={
      Show: false,
        senceActions:[{id: 1, name:'新增场景'}, {id: 2, name:'编辑场景'}]
    }


  }

  renderTipPic(){
    return(
        <View style={{ width: 40, justifyContent: 'center',alignItems:'center' }}>
          <View style={{  width: 2, height: 60, backgroundColor:"#d3d3d3"}}>
          </View>
          <View style={{ borderRadius: 12, width: 25, height: 25, backgroundColor:"#d3d3d3"}}>
          </View>
        </View>
    )
  }
  renderTipList(IDX){
    const obj = {marginTop: 60};
    return(
        <View style={[{marginLeft: 8},IDX !== 0 ? obj :{marginTop: 10} ]}>
          <MtLabel>检测到有人活动</MtLabel>
          <MtL4 style={{ marginTop: 10}}>2018.8.12-2018.9.30</MtL4>
        </View>
    )
  }
  render() {
    const {navigator} =this.props;
    const {senceActions} =this.state;
    return (
        <MtContainer>
          <NavigationBar
            title={'红外传感器'}
            statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
            navigator={navigator}
            style={{backgroundColor: '#F4F4F4'}}
          />
          <ScrollView >
            <View style = {{ justifyContent: 'center', alignItems: 'center' }}>
              <BoxShadowYaGuan

                  width={width-30}
                  height={180}
                  renderItem={()=>{
                    return (
                        <View style={[styles.senerState, styles.flex]}>
                          <MtLabel style={{ marginBottom: 30}}>当前状态</MtLabel>
                          <View style={{ flexDirection: 'row',alignItems: 'center'}}>
                            <Text style={styles.activePerson}>有人活动</Text>
                            <MtL3 style={styles.activeTime}>(2018.8.12-2018.9.30)</MtL3>
                          </View>
                        </View>
                    )
                  }}
              />
              <BoxShadowYaGuan
                  containerStyle={{ marginTop: 30}}
                  width={width-30}
                  height={180}
                  renderItem={()=>{
                    return (
                        <View style={[styles.senerList, styles.flex]}>
                          <MtLabel style={{ marginBottom: 30, fontWeight:'bold', }}>传感器检测记录</MtLabel>
                          <View style={{ flexDirection: 'row' }}>
                            <View style={{ width: 40, justifyContent: 'center',alignItems:'center' }}>
                                {senceActions && senceActions.length>0 &&      <View style={{ borderRadius: 12, width: 25, height: 25, backgroundColor:"#24A7AC"}}>
                                </View>}

                              {senceActions && senceActions.length > 0 && senceActions.map(
                                  (item,idex) => {
                                    if(idex !== 0){
                                      return (
                                          this.renderTipPic()
                                      )
                                    }

                                  }
                              )}
                            </View>
                            <View>
                            {senceActions && senceActions.length > 0 && senceActions.map(
                                (item,idex) => {
                                    return (
                                        this.renderTipList(idex)
                                    )


                                }
                            )}
                            </View>
                          </View>
                        </View>
                    )
                  }}
              />
            </View>
          </ScrollView>
        </MtContainer>
    )
  }
  _getShadowOpt(data) {
    return {
      width: data.width,
      height: data.height,
      color: "#999999",
      border: 3,
      radius: 6,
      opacity: 0.1,
      x: 0,
      y: 3,
      style: data.style
    }
  }
  _onModelPressButton() {

  }
}

const styles = StyleSheet.create({
  contentContainer: {

  },
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  flex: {

    paddingLeft: 20,
    paddingRight: 20,
  },
  senerState: {
    height: 180,
    width: width - 30,
    justifyContent: 'center',
    backgroundColor: '#fff',
    borderRadius: 4,
    paddingHorizontal: 15,
    paddingVertical: 20,
  },
  senerList: {
    height: 390,
    width: width - 30,
    backgroundColor: '#fff',
    borderRadius: 4,
    paddingHorizontal: 15,
    paddingVertical: 20,
  },
  powerText: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#333333',
  },
  activePerson: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#24A7AC',
  },
  activeTime: {
    marginLeft: 10,
  },


})

export default Sensor
